import React, { Component } from 'react';

import "../main.css";
import Head from './header.js';
import base from '../base.js';
import cookie from '../cookie.js';
import axios from 'axios';
import Body from "./body";
import Articles from "./article";
import Foot from './foot'

const basePath = base().basePath;

//获取url参数
function GetQueryString (name) {
    var after = window.location.hash.split("?")[1];
    if (after) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = after.match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        else {
            return null;
        }
    }
}

class Topic extends Component {

   constructor(props){
       super(props);
       this.state = {
           url:basePath+'/topic/hot',
           topicId: GetQueryString('t'),
           dataSource: void(0),
           token: cookie.getCookie('token'),
           topic:{},
           show:'topic',
           topicShow: false,
           pageInfo: {
               pageNumber:0,
               pageSize:20,
               totalPages:0,
               totalElements:0,
               last:void(0),
               first:void(0),
               size:0,
           },
       }
   }

    componentWillMount(){
        axios.post(basePath+'/topic/find',{topicId: this.state.topicId}, {headers: { token: this.state.token }})
            .then((res)=>{
                this.setState({
                    topic: res.data,
                    topicShow: true,
                })
            });
    }


  loadUrl(newUrl){
     this.setState({
         url: newUrl
     });
  }

  render() {

      let content;
      if(this.state.show === 'topic' && this.state.topicShow){
          content = (
              <div style={{width:'100%',overflow:'hidden'}}>
                  <div className="bg">
                    <Articles topic={this.state.topic} replays={this.state.topic.replays} userInfo={this.state.topic.user} commentCounts=""/>
                  </div>
              </div>
          );
      }else{
          content = (
              <Body url={this.state.url}/>
          );
      }

    return (
        <div>
           <Head init={true} fnCallback={this.loadUrl.bind(this)}/>
           <div className="body">
                <div className="content">
                    <div className="col1">
                        {content}
                    </div>
                </div>
            </div>
            <div className="footer">
                <Foot/>
            </div>
        </div>
    );
  }
}

export default Topic;
